<template>
    <div class="task-list">
        <!-- v-for="task in tasks"：这是 Vue 的循环指令，作用是遍历 tasks 数组
                每次循环将当前任务对象赋值给 task 变量，然后根据这个task 渲染出一个 <div> 元素。 -->

        <!-- :key="task.id"：:key 是 Vue 循环时的 “标识属性”，用于帮助 Vue 识别每个循环项的唯一性 -->

        <!-- :class="['task-item', { completed: task.completed }]"：Vue 的动态类名绑定，作用是根据条件给元素添加 CSS 类 -->
        <!-- 'task-item'：表示无论什么情况，都会给这个 <div> 添加 task-item 类 -->
        <!-- { completed: task.completed }：这是一个条件对象，意思是 “如果 task.completed 为 true，就添加 completed 类” -->
        <div v-for="task in tasks" :key="task.id" :class="['task-item', { completed: task.completed }]">
            <input class="task-checkbox" type="checkbox" v-model="task.completed">
            <span class="task-text">{{ task.text }}</span>
            <button class="delete-btn" @click="handleRemoveTask(task.id)">删除</button>
        </div>
    </div>
</template>

<script setup lang="ts">
import { defineProps, defineEmits } from 'vue';
import { type Task } from '../types/task';

// 定义组件接收的 props 类型
const props = defineProps<{
    tasks: Task[];
}>();

// 定义组件 emits 类型
const emit = defineEmits<{
    (e: 'remove-task', id: string): void;
}>();

// 处理删除任务
const handleRemoveTask = (id: string) => {
    emit('remove-task', id);
};
</script>


<style scoped>
.task-list {
    margin-bottom: 20px;
}

.task-item {
    display: flex;
    align-items: center;
    padding: 10px;
    border-bottom: 1px solid #eee;
    transition: background-color 0.3s;
}

.task-item:hover {
    background-color: #f9f9f9;
}

.task-checkbox {
    margin-right: 10px;
}

.task-text {
    flex: 1;
}

.task-item.completed .task-text {
    text-decoration: line-through;
    color: #95a5a6;
}

.delete-btn {
    background-color: #e74c3c;
    color: white;
    border: none;
    border-radius: 4px;
    padding: 5px 10px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.delete-btn:hover {
    background-color: #c0392b;
}
</style>